<template>
  <div>
    <my-list :list="users">
      <template #default="{ id }">
        <button @click="del(id)">删除</button>
      </template>
    </my-list>
    <hr />
    <my-list :list="goods">
      <template>
        <button>详情</button>
        <button>删除</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyList from "./components/MyList.vue";
export default {
  components: { MyList },
  data() {
    return {
      users: [
        { id: 2, name: "张三" },
        { id: 4, name: "李四" },
        { id: 5, name: "王五" },
        { id: 6, name: "赵六" },
      ],
      goods: [
        { id: 4, name: "方便面" },
        { id: 6, name: "火腿肠" },
        { id: 7, name: "鸡爪子" },
      ],
    };
  },
  methods: {
    del(id) {
      this.users = this.users.filter((item) => item.id != id);
    },
  },
};
</script>

<style>
</style>